[程式碼&DEMO] [HackMD完整筆記]

目標

用arr.reduce()和arr.map()方法去累加所有時間值，並進行時間格式轉換。

步驟流程

STEP1 取所有的時間值

const timeNodes = Array.from(document.querySelectorAll('[data-time]'));

透過querySelectorAll來取得標籤，以取得其中的時間資訊。
因為後面會用到map及reduce，所以資料型態要先轉成Array。（用Array.from）

STEP2 將取到的資料轉成秒數並加總

const seconds = 
// 取出每個元素的data-time資料
timeNodes.map(node => node.dataset.time)
.map(timeCode => {
      // (1)解構賦值取出split(':')後的分與秒
      // (2)透過map做parseFloat將字串轉數值
      const [mins, secs] = timeCode.split(':').map(parseFloat);
      // 回傳這組資料的總秒數
      return (mins * 60) + secs;
    })
    .reduce((total, vidSeconds) => total + vidSeconds);
    
//原本寫法 
timeNodes.map(function(node){node.dataset.time})
    .map(function(timeCode){
        const [mins, secs] = timeCode.split(':').map(parseFloat);
        return (mins * 60) + secs;
    })
    .reduce(function(total, vidSeconds) { total + vidSeconds});

用reduce來加總每次執行結果。

STEP3 總時間格式轉換

let secondsLeft = seconds;
const hours = Math.floor(secondsLeft / 3600);
secondsLeft = secondsLeft % 3600;
const mins = Math.floor(secondsLeft / 60);
secondsLeft = secondsLeft % 60;

用Math.floor來取整數，再用%來取剩下的餘數。

STEP4 印出並渲染到頁面

//在console印出
console.log(hours, mins, secondsLeft);

//渲染在html，顯示其總時間
function disPlayalltime(){
  totaltime=`總時間:${hour}:${minute}:${leavesec}`//"總時間:"+hour+":"+minute+":"+leavesec
  document.getElementsByTagName("p")[0].innerHTML = totaltime;
}
disPlayalltime();

學習筆記

Array.reduce( )

將一個累加器及陣列中每項元素（由左至右）傳入回呼函式，將陣列化為單一值。
語法：
arr.reduce(function(accumulator, currentValue, currentIndex, array), initialValue)
[參數]

• function(accumulator, currentValue, currentIndex, array)
  用於處理陣列中每個元素的函式。
  可傳入四個參數：

  • accumulator（必須）
    用來initialValue（初始值）或 累積回呼函式回傳值的accumulator（累加器：上一次呼叫後，所回傳的累加數值）。
  • currentValue(必須)
    目前處理的元素。
  • currentIndex（可選）
    目前處理的元素的索引。
    若有傳入initialValue，則由索引 0 之元素開始，若無則自索引 1 之元素開始。
  • array（可選）
    目前元素所屬陣列（也就是呼叫了reduce()的陣列）。

• initialValue（可選）
  第一次呼叫callback時要傳入累加器的初始值。若沒有提供，則原陣列的第一個元素將會被當作初始值。假如於一個空陣列呼叫 reduce() 且沒有提供累加器初始值，將會發生錯誤。

詳細的教學和範例放在codepen: 範例

Math.floor( )

函式會回傳無條件捨去後的最大整數。